<template>
  <div class="com-full com-flex-c">
    <div class="com-flex-1 com-flex-c record" v-for="(item, index) in list" :key="index">
      <div class="com-flex-r com-center">
        <div class="icon" :style="{ backgroundColor: item.color }"></div>
        <span class="name">{{ item.name }}</span>
        <div class="percentage">{{ perSurd(item.value, list) }}</div>
      </div>
      <div class="back com-flex-r com-center-c">
        <span class="number" :style="{ color: item.color }">{{
      item.value
    }}</span>
        <span class="unit">kw</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const total = ref();

const perSurd = (number, arr) => {
  total.value = (arr?.[0]?.value ?? 0) + (arr?.[1]?.value ?? 0);
  const pre = Math.round((number / total.value) * 100) + "%";
  return total.value === 0 ? '0%' : pre;
};
</script>

<style lang="scss" scoped>
.record {
  margin: 15px 0;
}

.icon {
  width: 14px;
  height: 11px;
  background: #44cd53;
}

.name {
  margin: 0 20px 0 30px;
  font-size: 22px;
  font-family: Adobe Heiti Std, Adobe Heiti Std-R;
  font-weight: normal;
  text-align: left;
  color: #b5c4d0;
}

.percentage {
  font-size: 32px;
  font-family: DIN Alternate, DIN Alternate-Bold;
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  letter-spacing: 3.2px;
}

.back {
  margin-top: 10px;
  width: auto;
  height: 66px;
  background: url("/imgs/17.png");
  background-size: auto 100%;
  background-repeat: no-repeat;

  .number {
    margin: 0 0 0 35px;
    font-size: 38px;
    font-family: DIN Alternate, DIN Alternate-Bold;
    font-weight: 700;
    text-align: left;
    // color: #44cd53;
    letter-spacing: 4.8px;
  }

  .unit {
    height: 28px;
    font-size: 28px;
    font-family: DIN Alternate, DIN Alternate-Bold;
    color: #fff;
    letter-spacing: 4.8px;
  }
}
</style>